<template>
	<div class="previewWrap">
        <component :is="componentPanel" />
	</div>
</template>
<script type="text/javascript">
	//使用pinia
	import useRoute  from '@/store/route.js'
	import useProject  from '@/store/project.js'
	import { mapState,mapActions } from 'pinia';
	import { markRaw,createVNode } from 'vue';
	export default{
		name:"preview",
		data () {
			return {
				componentPanel:null,
				nowProjectInfo:{},
				previewModule:{}
			}
		},
		computed: {
            ...mapState(useRoute, ['nowItem','nowProject']),
			...mapState(useProject, ['nowProject'])
        },
		async created (){
			if(await window.preload.isPackaged()){
				this.previewModule = import.meta.glob("../../output/*/preview/*.vue",{ eager: true });
				console.log('previewModule',this.previewModule);
				//是否打包
				this.nowProjectInfo = await this.$util.native.loadProjectNowInfo();
				console.log('nowProjectInfo',this.nowProjectInfo);
				console.log('nowItem',this.nowItem);
				console.log('nowProject',this.nowProject);
				let path = `../../output/${this.nowProjectInfo.nowProject.id}/preview/${this.nowItem.name}.vue`;
				this.componentPanel = markRaw(this.previewModule[path].default);
			}else{
				this.$util.native.loadPreviewComponent(this.nowItem.name).then( component => {
					this.componentPanel = markRaw(component.default);
				});
			}
        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
			
		}
	}
</script>
<style type="text/css" lang="less">
	.previewWrap{
		.pageCover();
		box-sizing:border-box;
		padding: 20px;
		overflow-y:scroll;
    }
</style>